<template>
  <div class="dashboard-container">
    <div class="app-container">
      <!-- 卡片 -->
      <el-card shadow="never">
        <!-- 搜索区域 -->
        <div class="navigation">
          <div class="left">
            <span>关键字</span>
            <el-input placeholder="根据编号搜索"></el-input>
          </div>
          <div class="right">
            <el-button>清除</el-button>
            <el-button type="primary">搜索</el-button>
          </div>
        </div>
        <!-- 数据数量显示区域 -->
        <div class="number">
          <i class="el-icon-info"></i>
          <span>数据一共{{ 178 }}条</span>
        </div>
        <!-- 表格区域 -->
        <div class="table">
          <el-table :data="tableData" style="width: 100%">
            <el-table-column prop="date" label="编号" width="180">
            </el-table-column>
            <el-table-column prop="name" label="题目" width="180">
            </el-table-column>
            <el-table-column prop="address" label="题目编号"> </el-table-column>
            <el-table-column prop="address" label="录入时间"> </el-table-column>
            <el-table-column prop="address" label="答题时间(s)">
            </el-table-column>
            <el-table-column prop="address" label="正确率(%)">
            </el-table-column>
            <el-table-column prop="address" label="录入人"> </el-table-column>
            <el-table-column prop="address" label="操作">
              <button><i class="el-icon-delete"></i></button>
            </el-table-column>
          </el-table>
        </div>
        <!-- 分页导航 -->
        <div class="page">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            
            :current-page="currentPage4"
            :page-sizes="pageSizes"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="400"
          >
          </el-pagination>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script>
import {randoms, removeRandoms} from '@/api/hmmm/questions.js'
export default {
  data() {
    return {
      tableData: [
        {
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        
      ],
      // 当前页
     currentPage4: 1,
    //  页容量
     pageSizes: [20 , 30, 50, 100],
    //  当选页容量
    pageSize: 20,
    
    };
  },

  methods : {
   handleSizeChange(){

   },
   handleCurrentChange(){

   }
  },

  created (){
    randoms()
  }
};
</script>

<style lang= 'scss' scoped>
.navigation {
  display: flex;
  margin-bottom: 20px;
  justify-content: space-between;
  .left {
    display: flex;
    align-items: center;
    text-align: right;
    width: 416px;
    height: 32px;
    span {
      width: 80px;
      padding: 0 12px 0 0;
      font-size: 14px;
    }
    .el-input--medium .el-input__inner {
      width: 336px;
      height: 32px;
      padding: 0 15px;
    }
  }
  .right {
    .el-button--medium {
      font-size: 14px;
      height: 32px;
      width: 56px;
    }
    .el-button {
      padding: 0;
    }
  }
}
.number {
  height: 35px;
  line-height: 32px;
  background-color: #f4f4f5;
  margin-bottom: 15px;
  color: #9093a5;
  font-size: 13px;
  .el-icon-info:before {
    margin: 0 10px 0 10px;
  }
}
.table {
  margin-bottom: 20px;
  button, select {
    height: 30px;
    border: 1px solid red ;
    border-radius: 50%;
    background-color: #fff;
    .el-icon-delete:before {
      color: red;
    }
    
  }
}

.page {
  float: right;
  margin-bottom: 20px;
}
</style>
